import React, { useState } from 'react';
import { Form, Input, Button, Modal, Descriptions } from 'antd';
import type { ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import columnsData, { columnsDataType } from './data'
import { getMerchantList } from './service'
import TableTitle from '../../components/TableTitle'
// 页面跳转
import { Link } from 'umi';

export default () => {
    const { TextArea } = Input;
    // 查看模态框控制
    const [isCheckDetailInfoModal, setIsCheckDetailInfoModal] = useState(false);

    // 冻结模态框控制
    const [isFrozenModal, setIsFrozenModal] = useState(false);
    // 确认 获取原因表单
    const reasonFormRef: any = React.createRef();

    // 处理冻结
    const handleFrozenInfoOk = async () => {
        // 获取新增表单的值
        var reponse = reasonFormRef.current?.getFieldsValue()
        console.log(reponse);
        // 表单验证
        reasonFormRef.current.validateFields().then(() => {
            // 重置表单
            reasonFormRef.current.resetFields();
            // 关闭模态框
            setIsFrozenModal(false)
        }).catch(() => { })
    }

    // 储存当前查看数据
    const [merchant, setMerchant] = React.useState({})

    // 表头数据
    const columns: ProColumns<columnsDataType>[] = columnsData

    // 操作行数据 自定义操作行
    const actionRender: any = (text: any, record: any, index: number) =>
        <ul className="ant-list-item-action" style={{ margin: 0 }}>
            <li>
                <a onClick={() => { check(record.merchantName) }}>查看</a>
                <em className="ant-list-item-action-split"></em>
            </li>
            <li>
                <a onClick={() => { frozenInfo() }} className="ant-dropdown-trigger">冻结</a>
                <em className="ant-list-item-action-split"></em>
            </li>
            <li>
                <Link to={{
                    pathname: '/discount-configuration',
                    state: { fromDashboard: record },
                }} >折扣配置</Link>
            </li>
        </ul>

    // 自定义数据的表格头部数据
    columns.forEach((item: any) => {
        item.dataIndex === 'action' ? item.render = actionRender : undefined
    });

    // 查看 这里模拟查看的数据是通过接口获取的情况 merchantName传入的参数=查询操作
    const check = async (merchantName: string) => {
        const merchant = await getMerchantList({ merchantName })
        setMerchant(merchant.data[0])
        setIsCheckDetailInfoModal(true)
    }

    // 冻结
    const frozenInfo = () => {
        setIsFrozenModal(true)
    }

    return (
        <div>
            {/* Pro表格 */}
            <ProTable<columnsDataType>
                headerTitle={<TableTitle title='商户管理' />}
                bordered
                // 表头
                columns={columns}
                // 请求获取的数据
                request={
                    async params => getMerchantList(params)
                }
                rowKey="id"
                // 本地存储表格列的显示数据
                columnsState={{
                    persistenceKey: 'pro-table-singe-demos',
                    persistenceType: 'localStorage',
                }}
                // 搜索框配置
                search={{
                    labelWidth: 'auto',
                }}
                // 搜索表单的配置
                form={{
                    ignoreRules: false,
                }}
                pagination={{
                    pageSize: 5,
                }}
                dateFormatter="string"
            />
            {/* 查看模态框 */}
            <Modal
                title="商户信息"
                width={1000}
                centered
                footer={<Button type="primary" htmlType="submit" onClick={() => setIsCheckDetailInfoModal(false)}>
                    确认
                </Button>}
                visible={isCheckDetailInfoModal}
                onCancel={() => setIsCheckDetailInfoModal(false)}
            >
                <Descriptions
                    column={{ xxl: 4, xl: 4, lg: 4, md: 3, sm: 2, xs: 1 }}
                >
                    <Descriptions.Item label="商户名">{merchant.merchantName}</Descriptions.Item>
                    <Descriptions.Item label="商户号">{merchant.merchantNumber}</Descriptions.Item>
                    <Descriptions.Item label="联系人">{merchant.contacts}</Descriptions.Item>
                    <Descriptions.Item label="邮箱">{merchant.mailbox}</Descriptions.Item>
                    <Descriptions.Item label="客户号"> </Descriptions.Item>
                    <Descriptions.Item label="商户状态"> </Descriptions.Item>
                    <Descriptions.Item label="注册日期"> </Descriptions.Item>
                    <Descriptions.Item label="电话"> </Descriptions.Item>
                    <Descriptions.Item label="有效折扣"> </Descriptions.Item>
                </Descriptions>
            </Modal>
            {/* 冻结模态框 */}
            <Modal
                title={<div><span>户名</span><span style={{ marginLeft: 20 }}>商户号</span></div>}
                centered
                visible={isFrozenModal}
                onOk={handleFrozenInfoOk}
                onCancel={() => setIsFrozenModal(false)}
            >
                <Form
                    name="basic"
                    ref={reasonFormRef}
                    wrapperCol={{ span: 24 }}
                    autoComplete="off"
                >
                    <Form.Item
                        key="refusalCause"
                        name="refusalCause"
                        rules={[{ required: true, message: '请填写原因' }]}
                    >
                        <TextArea rows={4} placeholder="请输入原因" />
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    );
};